<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- table表格 -->
      <el-table class="comment-container" :data="articleCommentList" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" >
        </el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数" >
        </el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数">
        </el-table-column>
        <el-table-column prop="comment_status" label="状态">
          <template slot-scope="{row}">
            {{ row.comment_status ? '打开' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-switch
              v-model="row.comment_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="row.is_status"
              @change="onCommentStateChange(row)"
              >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size.sync="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_count"
            :disabled="flag"
            >
          </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import { reqArticleComment, reqCommentStatus } from '@/api'
  export default {
    name: 'commentIndex',
    data() {
      return {
        currentPage: 1,
        articleCommentList: [], // 文章评论数据管理
        total_count: 0, // 文章评论数据管理总条数
        pageSize: 10,
        flag: false // 节流
      }
    },
    created(){
      this.getArticleComment(1)
    },
    methods: {
      // 获取评论文章内容
      async getArticleComment(page = 1){
        // 让当前激活所对应属性重新赋值,主要用在选一页展示多少条数据这个方法
        this.currentPage = page
        this.flag = true
        const res = await reqArticleComment({
          response_type: 'comment', // 主要靠这个属性字段获取文章评论数据
          page, // 请求第 ? 页
          per_page: this.pageSize // 一页 ? 条数据
        })
        const result = res.data.results
        result.forEach(obj => {
          obj.is_status = false
        })
        this.articleCommentList = result // 添加自定义数据段完毕并且赋值
        this.total_count = res.data.total_count // 评论总数量赋值
        this.flag = false // 节流
        console.log(res,'文章评论管理数据')
      },
      // 切换文章内容评论状态
      async onCommentStateChange(row){
        row.is_status = true
        try{
          const res = await reqCommentStatus(row.id,row.comment_status)
          this.$message({
            type: 'success',
            message: row.comment_status ? '开启文章评论成功' : '关闭文章评论成功'
          })
        }catch(e){

        }finally{
        row.is_status = false
        }
      },
      // 选择一页展示多少条数据时触发的事件
      handleSizeChange(page){
        // this.getArticleComment(1)
        this.getArticleComment()
      },
      // 当前页码发生变化时触发的事件
      handleCurrentChange(page){
        this.getArticleComment(page)
      },
    },
    computed: {},
    components: {}
  }
</script>
<style lang="less" scope>
  .comment-container {
    // margin-top: 10px;
  }
</style>
